<template>
  <div id="conversion-funnel">
    <v-header title="漏斗分析" ref="vHeader" @on-save="saveValue" :dataMsg="downloadData" :saveShow="save" :showDownloadBtn="false"></v-header>
    <div class="box">
      <div class="box-con" v-show="toggleValue === 'index'">
        <div class="conditions-container bg-color-white ovh">
          <div class="query-conditions">
            <div class="common-conditions">
              <!------常用 start------>
              <div class="tags com-content">
                <v-pageHeader ref="pageHeader" @on-click="showList" :InquireTransCode="InquireTransCode"
                              :setTransCode="setTransCode"
                              :delTransCode="delTransCode" itemKey="anal_id" itemValue="anal_name"
                              num="02"></v-pageHeader>
              </div>
              <!------常用 end------>
              <div class="border-box">
                <!------用户分群 start------>
                <div class="com-content">
                  <span class="font12">用户分群</span>
                  <el-select size="mini" class="width160" placeholder="请选择" v-model="userGroup">
                    <el-option label="请选择" value=""></el-option>
                    <el-option
                      v-for="item in groupList"
                      :key="item.group_id"
                      :label="item.group_name"
                      :value="item.group_id">
                    </el-option>
                  </el-select>
                </div>
                <!------用户分群 end------>
                <!--分组 start-->
                <div class="border-bottom ovh com-content" v-for="(val, index) in groupVal" :key="val.key">
                  <span class="lf font12">分组</span>
                  <el-select size="mini" class="width160 lf" v-model="groupVal[index].meta_id" placeholder="请选择"
                             @change="changeGroupVal(index)" filterable>
                    <el-option
                      v-for="item in data.META_COLUME"
                      :key="item.meta_id"
                      :label="item.colume_chs"
                      :value="item.meta_id">
                    </el-option>
                  </el-select>
                  <div class="lf">
                    <!--<v-numberSelect class="lf" type="all"></v-numberSelect>-->
                    <i class="iconfont icon-add" @click="add('group', index)"></i>
                    <i v-if="groupVal.length > 1" class="iconfont icon-close" @click="remove('group', index)"></i>
                  </div>
                </div>
                <!--分组 end-->
              </div>
              <!--创建漏斗步骤 start-------------------------------------->
              <!--第一层-->
              <div class="c-step" v-for="(group, index) in cserial" :key="group.key">
                <span class="serial font12">{{ index + 1 }}</span>
                <el-select size="mini" class="width160" placeholder="请选择" v-model="group.event_id" filterable>
                  <el-option
                    v-for="item in event_list"
                    :key="item.event_id"
                    :label="item.event_name"
                    :value="item.event_id">
                  </el-option>
                </el-select>
                <el-input size="mini" class="width160" v-model="group.step_name" placeholder="自定义步骤名称" maxlength="10"></el-input>
                <span class="icons-list">
                                    <i class="iconfont icon-close" @click="removeStepCondition(index)"></i>
                                    <i class="iconfont icon-add" @click="addStepCondition(group)"></i>
                                </span>
                <!--增加步骤 第二层 start-->
                <div class="filter-conditions  bg-color-white font12" v-if="group.w_list[0].cond_groups.length">
                  <div class="conditions-list">
                    <!--                    <div v-if="group.w_list.length >= 2" class="group-btn" @click="toggle">
                                          <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
                                        </div>-->
                    <div class="condition-group-list" v-for="(item, index) in group.w_list" :key="item.key">
                      <div class="condition-group" v-for="(item, ind) in item.cond_groups" :key="item.key">
                        <div class="item-btn" v-if="ind !== 0">
                          <v-button :width="30" @on-click="toggleRelationship(item)"
                                    :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                        </div>
                        <div class="condition-group-item">
                          <el-select size="mini" v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                                     @change="changeEvent(item)" filterable>
                            <el-option
                              v-for="val in cond_arr1"
                              :key="val.key"
                              :label="val.colume_chs"
                              :value="val.meta_id">
                            </el-option>
                          </el-select>
                          <el-select size="mini" v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                                     @change="changeAttr(item)" filterable>
                            <el-option
                              v-for="val in cond_arr2"
                              :key="val.key"
                              :label="val.code_value_nm_cns"
                              :value="val.code_value">
                            </el-option>
                          </el-select>
                          <el-input size="mini" v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]">222</el-input>
                          <div class="date-time lf" v-if="getBool_2(item)">
                            <span>在</span>
                            <el-date-picker
                              size="mini"
                              class="width270"
                              v-model="item.vs_date_value"
                              type="daterange"
                              align="right"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="change(item, ind)"
                              :picker-options="disableDate">
                            </el-date-picker>
                            <span>之间</span>
                          </div>
                          <div class="amount-range lf" v-if="getBool_3(item)">
                            <span>在</span>
                            <el-input size="mini" class="width160" v-model="item.cond_value[0]" placeholder="输入内容"></el-input>
                            <span>和</span>
                            <el-input size="mini" class="width160" v-model="item.cond_value[1]" placeholder="输入内容"></el-input>
                            <span>之间</span>
                          </div>
                          <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                            :closable="true"></v-selectCheckbox>
                          <div class="icons-list lf">
                            <!--<i v-if="item.vs_data_type === 'text'" class="iconfont icon-revise"></i>-->
                            <i class="iconfont icon-close" @click="removeStepCond(group, index)"></i>
                            <!-- <i class="iconfont icon-add" @click="addStepRow(group, ind)"></i> -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--增加步骤 end-->
              </div>
              <div class="add-condition pl30">
                <el-button type="primary" plain icon="el-icon-plus" @click="add_step" :disabled="disabledBtn"></el-button>
                <span>增加步骤</span>
              </div>
              <!--创建漏斗步骤 end-->
              <!--筛选条件 start------------------------------------>
              <div class="filter-conditions  bg-color-white font12">
                <div class="conditions-list">
                  <div v-if="this.conditionList.length >= 2" class="group-btn" @click="toggle">
                    <v-button :width="30" :btnText="groupBtnVal.code_value_nm_cns"></v-button>
                  </div>
                  <div class="condition-group-list" v-for="(group, index) in conditionList" :key="group.key">
                    <div class="group-head" v-if="index !== 0"></div>
                    <div class="condition-group" v-for="(item, ind) in group.cond_groups" :key="item.key">
                      <div class="item-btn" v-if="ind !== 0">
                        <v-button :width="30" @on-click="toggleRelationship(item)"
                                  :btnText="item.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                      </div>
                      <div class="condition-group-item">
                        <el-select size="mini" v-model="item.meta_id" class="width160 lf" placeholder="请选择"
                                   @change="changeEvent(item)" filterable>
                          <el-option
                            v-for="val in cond_arr1"
                            :key="val.key"
                            :label="val.colume_chs"
                            :value="val.meta_id">
                          </el-option>
                        </el-select>
                        <el-select size="mini" v-model="item.vs_code_value" class="width100 lf" placeholder="请选择"
                                   @change="changeAttr(item)" filterable>
                          <el-option
                            v-for="val in cond_arr2"
                            :key="val.key"
                            :label="val.code_value_nm_cns"
                            :value="val.code_value">
                          </el-option>
                        </el-select>
                        <el-input size="mini" v-if="getBool_1(item)" class="lf" v-model="item.cond_value[0]"></el-input>
                        <div class="date-time lf" v-if="getBool_2(item)">
                          <span>在</span>
                          <el-date-picker
                            size="mini"
                            class="width270"
                            v-model="item.vs_date_value"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            @change="change(item)">
                          </el-date-picker>
                          <span>之间</span>
                        </div>
                        <div class="amount-range lf" v-if="getBool_3(item)">
                          <span>在</span>
                          <el-input size="mini" class="width160" v-model="item.cond_value[0]" placeholder="输入内容"></el-input>
                          <span>和</span>
                          <el-input size="mini" class="width160" v-model="item.cond_value[1]" placeholder="输入内容"></el-input>
                          <span>之间</span>
                        </div>
                        <v-selectCheckbox v-if="getBool_4(item)" class="address-list lf" :options="countryList"
                                          :closable="true"></v-selectCheckbox>
                        <div class="icons-list lf">
                          <!--<i v-if="item.vs_data_type === 'text'" class="iconfont icon-revise"></i>-->
                          <i class="iconfont icon-close" @click="remove_cond(index, ind)"></i>
                          <i class="iconfont icon-add" @click="addRow(group, ind)"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="add-condition">
                  <el-button type="primary" plain icon="el-icon-plus" @click="addCondition"></el-button>
                  <span>筛选条件</span>
                </div>
                <div class="examine">
                  <div class="btns rf">
                    <el-button type="primary" size="mini" @click="search">查看</el-button>
                    <el-button size="mini" @click="cancelEven">重置</el-button>
                  </div>
                </div>
              </div>
              <!--筛选条件 end-->
            </div>
          </div>
        </div>
        <!--ECharts图表-->
        <div class="echarts-box">
          <div class="column">
            <h3>转化漏斗</h3>
            <range-date-picker class="timewidth210 height30" ref="toolBar" :defaultDate="dates" @date-change="getDate"></range-date-picker>
            <!-- <el-date-picker
              size="mini"
              class="timewidth210 height30"
              v-model="dates"
              type="daterange"
              range-separator="至"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getDate">
            </el-date-picker> -->
          </div>
          <!--echarts 图形容器-->
          <div class="barEcharts">
            <chart :options="option" v-if="this.option.series.length > 0"></chart>
            <VNoData v-else></VNoData>
          </div>
          <div class="conversiosn" v-if="titleFlag">
            <table class="table-rows" width="100%">
              <thead>
              <tr>
                <th width="180">日期</th>
                <th v-for="item in tableTitle" :key="item.id">{{item.event_name}}</th>
                <th>详情</th>
              </tr>
              </thead>
              <tbody>
              <!--tableData-->
              <tr v-for="item in tableData" :key="item.id">
                <td>{{item.by_value}}</td>
                <td v-for="items in item.cells" :key="items.id">
                  <span class="blue-color">{{ items.people }}人</span>
                  <el-progress :stroke-width="4" :percentage="parseFloat(items.percent)"></el-progress>
                </td>
                <td @click="goUserList(item)" style="color: #016DFB; cursor: pointer">查看</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- - 用户列表 - -->
      <div v-show="toggleValue === 'userList'" class="userList">
        <user-list ref="userList" @on-goBack="backtoggleValue = 'index'" pageName="userDetail"></user-list>
      </div>
      <!-- - 用户详情 - -->
      <div v-if="toggleValue === 'userDetail'" class="userDetail">
        <user-detail pageName="userList"></user-detail>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {
    VButton,
    VHeader,
    VSelectCheckbox,
    VPageHeader,
    RangeDatePicker
    // VNumberSelect
  } from '../../../../components'
  import api from '../../../../api/url'
  import Msg from '../../../../assets/js/msg'
  import ajax from '../../../../api/ajax/ajax'
  import {getDateTime, dateFormat} from '../../../../assets/js'
  import userList from '../../../../view/comm/userList'
  import userDetail from '../../../../view/comm/userDetail'
  import store from '@/store'
  import VNoData from '../../../../components/VNoData/VNoData'
  export default {
    components: {
      VButton,
      VHeader,
      VPageHeader,
      userList,
      VSelectCheckbox,
      userDetail,
      VNoData,
      RangeDatePicker
      // VNumberSelect
    },
    data () {
      return {
        disabledBtn: false, // 是否禁止点击添加步骤按钮
        save: true, // 是否显示下载按钮
        downloadData: [], // 保存要下载的数据
        InquireTransCode: api.SELECTBAARCHANALLIST, // 查询
        setTransCode: api.SETTINGBAARCHANALFORTOP, // 设置 / 取消置顶
        delTransCode: api.DELETEBAARCHANAL, // 删除常用
        analyse_type: '02',
        groupList: [], // 用户分群列表
        userGroup: '', // 用户分群的值
        event_list: [], // 事件开始
        event_value: '', // 事件开始的值
        groupVal: [
          {
            meta_id: ''
          }
        ],
        addGroupShowList: [false], // 控制分组后面图标的显示隐藏
        radio: '1',
        dates: [], // 时间
        cserial: [], // 创建漏斗步骤头部
        step_name: '',
        conditionList: [], // 筛选条件
        w_list: [],
        tableData: [], // 表格数据
        tableTitle: [],
        titleFlag: false,
        cond_arr1: null, // 条件筛选的第一框
        cond_arr2: null, // 条件筛选的第二框
        groupBtnVal: null, // 条件筛选，第三方变量，最外层 且 / 或 的值
        option: {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [],
            type: 'scroll'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: []
        },
        disableDate: { // 禁用当前日期之后的日期
          disabledDate (time) {
            return time.getTime() > (new Date().getTime())
          }
        },
        from_date: '',
        to_date: ''
      }
    },
    computed: {
      // 'index' 显示主页，'userList' 显示用户列表，'userDetail' 显示用户详情
      toggleValue: () => {
        return store.state.toggleValue
      }
    },
    methods: {
      Back () {
        store.commit('updateToggleValue', 'index')
        this.save = true
      },
      // 点击表单显示用户列表
      goUserList (obj) {
        let arr = []
        obj.cells.forEach(item => {
          arr.push(item.event_id)
        })
        const paramsData = {
          message: {
            analyse_type: this.analyse_type,
            user_group: this.userGroup, // 用户分群
            g_list: this.groupVal, // 分组
            w_list: this.conditionList, // 事件筛选
            step_list: this.cserial, // 漏斗步骤
            from_date: this.from_date,
            to_date: this.to_date
          },
          reqjson: {
            event_datetime: obj.by_value,
            event_ids: arr
          },
          page: {
            pageNo: '1',
            pageSize: '100'
          }
        }
        sessionStorage.setItem('from_date', this.from_date)
        sessionStorage.setItem('to_date', this.to_date)
        sessionStorage.setItem('paramsData', JSON.stringify(paramsData))
        ajax.post(api.SELECTANALYSEUSEROBJECTLIST, paramsData).then(res => {
          store.commit('updateToggleValue', 'userList')
          this.save = false
          this.userList = res.data
          this.$refs.userList.getUserList(this.userList)
        })
      },
      saveValue (obj) { // 点击保存为常用
        if (!this.groupVal[0].meta_id) {
          Msg.alert('请选择分组')
          return
        } else if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        // 保存页面输入的内容
        let paramsData = {
          user_group: this.userGroup, // 用户分群
          g_list: this.groupVal, // 分组
          w_list: this.conditionList, // 事件筛选
          step_list: this.cserial, // 漏斗步骤
          from_date: this.from_date,
          to_date: this.to_date
        }
        // 调用 保存为常用接口
        ajax.post(api.SAVEASCOMMON,
          {
            anal_name: obj.pageHeaderName,
            anal_type: this.analyse_type,
            is_top: obj.isTop,
            message_content: JSON.stringify(paramsData)
          }
        ).then(res => {
          Msg.alert('保存成功')
          ajax.post(this.InquireTransCode, {anal_type: this.analyse_type}).then(res => {
            this.$refs.pageHeader.getList(res.data)
            this.$refs.vHeader.reset()
          })
        })
      },
      cancelEven () { // 重置
        this.dates = [] // 时间
        this.from_date = ''
        this.to_date = ''
        this.userGroup = '' // 用户分群
        // 分组
        this.groupVal = [
          {
            meta_id: ''
          }
        ]
        this.conditionList = [] // 事件筛选
        this.cserial = [] // 漏斗步骤，
        this.option.series = []
        this.titleFlag = false
      },
      // 点击常用反显数据
      showList (obj) {
        ajax.post(api.SELECTBAARCHANAL, { anal_id: obj.anal_id }).then(res => {
          // 数据反显在输入框 下拉框
          let data = JSON.parse(res.data.message_content)
          this.groupVal = data.g_list // 分组
          this.conditionList = data.w_list // 筛选条件
          this.cserial = data.step_list // 漏斗步骤
          // 添加到时间选择框里面
          this.from_date = data.from_date
          this.to_date = data.to_date
          let dateArr = [dateFormat(this.from_date), dateFormat(this.to_date)]
          dateArr.forEach((item, index) => {
            this.dates.splice(index, 1, item)
          })
        })
      },
      add (str, index) {
        if (str === 'event') {
          let itemParams = {
            meta_id: '',
            cond_value: [],
            cond_link: 'B010006#AND',
            cond_fmt: 'B010003#01',
            disp_serial: (index + 1) + '',
            vs_event_name: '',
            vs_isSelect: true,
            vs_radio: 0,
            vs_list: [],
            vs_colume_chs: '',
            vs_event_meta_id: ''
          }
          this.eventList.splice(index + 1, 0, itemParams)
          this.addEventShowList.splice(index + 1, 0, false)
        } else if (str === 'group') {
          let itemParams = {
            meta_id: '',
            code_value_nm_cns: '',
            vs_code_id: '',
            vs_isSelect: true,
            code_value: ''
          }
          if (this.groupVal.length > 2) {
            Msg.alert('分组最多添加三个')
            return
          }
          this.groupVal.splice(index + 1, 0, itemParams)
          this.addGroupShowList.splice(index + 1, 0, false)
        }
      },
      remove (str, index) {
        if (str === 'event') {
          this.eventList.splice(index, 1)
          this.addEventShowList.splice(index, 1)
        } else if (str === 'group') {
          this.groupVal.splice(index, 1)
          this.addGroupShowList.splice(index, 1)
        }
      },
      // 分组事件改变
      changeGroupVal (index) {
        let list = []
        this.groupVal.forEach(item => {
          if (item.meta_id) {
            list.push(item)
          }
        })
      },
      // cserial 最外层添加
      add_step () {
        let itemParams = {
          step_name: '',
          event_id: '',
          w_list: [
            {
              cond_groups: []
            }
          ]
        }
        itemParams.disp_serial = this.cserial.length + 1
        this.cserial.push(itemParams)
        // 添加的步骤超过3个时，禁止添加步骤
        if (this.cserial.length >= 3) {
          this.disabledBtn = true
        } else {
          this.disabledBtn = false
        }
      },
      // 删除步骤条件 第一层添删除
      removeStepCondition (index) {
        this.cserial.splice(index, 1)
      },
      // 添加步骤条件 第一层添加
      addStepCondition (group) {
        for (var i = 0; i < group.w_list.length; i++) {
          if (group.w_list[i].cond_groups.length < 3) {
          let itemData = {
          cond_link: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.data.B010006[0].code_value,
          meta_id: '',
          cond_fmt: '',
          cond_value: []
        }
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        group.w_list[0].cond_groups.push(itemData)
          } else {
            Msg.alert('分组最多添加三个')
          }
        }
      },
      // 删除条件内容 第二层添删除
      removeStepCond (group, index) {
        group.w_list[0].cond_groups.splice(index, 1)
      },
      // 添加条件内容 第二层添加
      addStepRow (group, index) {
          let itemData = {
          cond_link: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.data.B010006[0].code_value,
          meta_id: '',
          cond_fmt: '',
          cond_value: []
        }
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        group.w_list[0].cond_groups.push(itemData)
      },
      // 切换外层的且 / 或
      toggle () {
        if (this.groupBtnVal === this.data.B010006[0]) {
          this.groupBtnVal = this.data.B010006[1]
        } else {
          this.groupBtnVal = this.data.B010006[0]
        }
      },
      // 切换行与行之间的 且 / 或
      toggleRelationship (item) {
        if (item.vs_bool_code_value === 'and') {
          item.vs_bool_code_value = 'or'
        } else {
          item.vs_bool_code_value = 'and'
        }
        item.cond_link = `${item.vs_bool_code}#${item.vs_bool_code_value}`
      },
      // 事件选择
      changeEvent (obj) {
        this.cond_arr1.forEach(item => {
          if (item.meta_id === obj.meta_id) {
            if (item.data_type === 'text') {
              this.cond_arr2 = this.data.B010003
              obj.vs_data_type = 'text'
              obj.vs_code = 'B010003'
            } else if (item.data_type === 'number') {
              this.cond_arr2 = this.data.B010004
              obj.vs_data_type = 'number'
              obj.vs_code = 'B010004'
            } else if (item.data_type === 'date') {
              this.cond_arr2 = this.data.B010005
              obj.vs_data_type = 'date'
              obj.vs_code = 'B010005'
            }
          }
        })
      },
      // 属性选择
      changeAttr (obj) {
        obj.cond_fmt = `${obj.vs_code}#${obj.vs_code_value}`
      },
      // 添加筛选条件
      addCondition () {
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: '',
          vs_bool_code_value: '',
          meta_id: null,
          disp_serial: null,
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        let groupData = {
          vs_bool_code: '',
          disp_serial: null,
          cond_link: null,
          elem_type: 'W',
          cond_groups: []
        }
        let count = this.conditionList.length
        this.cond_arr1 = this.data.META_COLUME
        this.conditionList.splice(this.conditionList.length, 0, groupData)
        this.conditionList[count].cond_groups.splice(0, 0, itemData)
        this.conditionList[count].disp_serial = count
        this.conditionList[count].cond_groups[0].disp_serial = this.conditionList[count].cond_groups.length - 1
        count++
      },
      // 删除一行
      remove_cond (index, ind) {
        if (this.conditionList.length === 1) {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        } else {
          if (this.conditionList[index].cond_groups.length === 1) {
            this.conditionList.splice(index, 1)
          } else {
            if (ind === 0) {
              this.conditionList[index].cond_groups.splice(ind, 1)
              this.conditionList[index].cond_groups[ind].cond_link = ''
            } else {
              this.conditionList[index].cond_groups.splice(ind, 1)
            }
          }
        }
      },
      // 添加一行
      addRow (group, ind) {
        let itemData = {
          vs_data_type: '',
          vs_code: '',
          vs_code_value: '',
          vs_bool_code: 'B010006',
          vs_bool_code_value: this.data.B010006[0].code_value,
          meta_id: null,
          disp_serial: ind + 1,
          cond_link: '',
          cond_fmt: '',
          cond_value: []
        }
        itemData.cond_link = `${itemData.vs_bool_code}#${itemData.vs_bool_code_value}`
        group.cond_groups.splice(ind + 1, 0, itemData)
      },
      // 获取日期
      getDate (list) {
        if (list) {
          this.from_date = getDateTime(list[0], 's')
          this.to_date = getDateTime(list[1], 's')
        } else {
          this.from_date = ''
          this.to_date = ''
        }
      },
      // 区间日期改变事件
      change (item) {
        if (item.vs_date_value) {
          item.vs_date_value.forEach((val, key) => {
            item.cond_value[key] = getDateTime(val, 's')
          })
        }
      },
      // 查看结果
      search () {
        if (!this.cserial.length) {
          Msg.alert('请点击添加步骤')
          return
        } else if (!this.cserial[0].event_id) {
          Msg.alert('请选择步骤事件')
          return
        } else if (!this.cserial[0].step_name) {
          Msg.alert('请输入步骤名称')
          return
        }
        if (!this.from_date || !this.to_date) {
          Msg.alert('请选择日期')
          return
        }
        let message = {
          analyse_type: this.analyse_type,
          user_group: this.userGroup, // 用户分群
          g_list: this.groupVal, // 分组
          step_list: this.cserial, // 漏斗步骤
          w_list: this.conditionList, // 事件筛选
          from_date: this.from_date,
          to_date: this.to_date
        }
        ajax.post(api.ANALYSESEARCHOBJECT, message).then(res => {
          this.downloadData = res.data.rows
          this.tableTitle = res.data.rows[0].cells
          this.tableData = res.data.rows
          let etitle = []
          let arr = []
          let dataList = []
          this.tableTitle.forEach((item, index) => {
            etitle.push(item.event_name)
            let obj = {}
            obj.type = 'line'
            obj.stack = '总量'
            obj.data = []
            obj.name = item.event_name
            this.tableData.forEach(item2 => {
              if (index === 0) {
                arr.push(item2.by_value)
              }
              item2.cells.forEach(item3 => {
                if (item.event_name === item3.event_name) {
                  obj.data.push(item3.people)
                }
              })
            })
            dataList.push(obj)
          })
          if (this.tableData.length) {
            this.titleFlag = true
            // echarts 表头
            this.option.legend.data = etitle
            // 时间
            this.option.xAxis.data = arr
            // 数据
            this.option.series = dataList
          }
        })
      },
      // 判断条件
      getBool_1 (item) {
        const type = item.vs_data_type
        const value = item.vs_code_value
        if (type === 'number' && value > 0 && value < 9) { // 1-8
          return true
        } else if (type === 'text' && value > 0 && value < 11) { // 1-10
          return true
        } else if (type === 'date' && value > 0 && value < 11) { // 1-10
          return true
        }
      },
      getBool_2 (item) {
        if (item.vs_data_type === 'date' && item.vs_code_value === '15') {
          return true
        }
      },
      getBool_3 (item) {
        if (item.vs_data_type === 'number' && item.vs_code_value === '11') {
          return true
        }
      },
      getBool_4 (item) {
        return false
      }
    },
    created () {
      this.dates = [new Date(), new Date()]
      this.from_date = getDateTime(new Date(), 's')
      this.to_date = getDateTime(new Date(), 's')
      this.data = JSON.parse(sessionStorage.getItem('commonData'))
      // 用户分群列表
      ajax.post(api.SELECTUSERGROUPLIST).then(res => {
        this.groupList = res.data
      })
      this.event_list = this.data.B020002
      this.groupBtnVal = this.data.B010006[0]
      this.cond_arr1 = this.data.META_COLUME
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #conversion-funnel
    height 100%
    .box
      height calc(100% - 56px)
      padding 10px 0 10px 10px
      .box-con
        height 100%
        overflow auto
        padding-right 10px
        .query-conditions
          .border-box
            border-bottom 1px solid #d8dce5
            border-top 1px solid #d8dce5
          .common-conditions .com-content
            height 50px
            line-height 50px
            padding 0 20px
            color #5a5e66
            font-size 0
            span.font12
              display: inline-block
              width 80px
              height 30px
              margin-right 10px
              font-size 12px
        i.iconfont
          color #d8dce5
          margin 0 5px 0 5px
          font-size 14px
        i.iconfont:hover
          color #016DFB
      #VNumberSelect
        font-size 15px
        margin-right 10px
      .ovh
        overflow hidden
      .mr10
        margin-right 10px
      .pl30
        padding-left 30px
    .c-step
      padding 0 20px
      .serial
        text-align center
        display inline-block
        width 80px
        height 50px
        line-height 50px
        margin-right 10px
        font-size 12px
      .icons-list
        margin-left 15px
        i.iconfont
          font-size 14px
          margin-right 10px
          color #D8DCE5
        i.iconfont:hover
          color #016DFB

    .echarts-box
      /*padding 20px 30px 45px 20px*/
      & > div
        padding 20px 30px 30px 20px
        margin-top 10px
        background #fff
      .column > h3
        font-weight 550
        font-size 16px
        color #6C7079
        text-align center
      .conversiosn
        padding 0
        .table-rows
          border: 1px solid #D8DCE5
          border-collapse collapse
          text-align center
          color #5A5E66
          th
            font-weight normal
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 50px
            font-size 14px
            background-color #f4f4f5
          td
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 50px
            padding 0 20px
            font-size 12px
      .barEcharts
        .echarts
          position static
          width 100%

    /*筛选条件 start*/
    .filter-conditions
      padding 30px 20px 20px 30px
      .conditions-list:before
        content ''
        width 0
        height calc(100% - 20px)
        border-left 1px solid #D8DCE5
        position absolute
        left 15px
        top 10px
      .conditions-list
        padding-left 40px
        position relative
        .el-input__inner
          font-size 12px
        .group-btn
          position absolute
          left 0
          top 50%
          margin-top -15px
        .condition-group-list
          .group-head
            height 50px
          .condition-group
            & > div
              height 50px
              line-height 50px
              padding-left 10px
            .item-btn
              position relative
              .v-button
                position absolute
            .condition-group-item
              // background #f4f4f5
              overflow hidden
              & > .el-input
                width 120px
              .date-time
                padding-left 10px
                .el-date-editor
                  position relative
                  margin 0 10px
                  padding-top 0px
                  .el-range__icon
                    line-height 25px
                  .el-range-input, .el-range-separator
                    position relative
                  .el-range-separator
                    padding 0
                    font-size 12px
              .amount-range
                padding-left 10px
                .el-input
                  margin 0 8px
              .v-select-checkbox
                margin-left 10px
              .icons-list
                margin-left 15px
                i.iconfont
                  font-size 14px
                  margin-right 10px
                  color #D8DCE5
                i.iconfont:hover
                  color #016DFB

    .add-condition
      width 150px
      height 50px
      line-height 50px
      cursor pointer
      .el-button
        width 30px
        height 30px
        display inline-block
        padding 0
        .el-icon-plus
          font-size 16px
          font-weight bold
      span
        font-size 12px
        color #016DFB
        margin-left 10px

    .examine
      height 30px
      line-height 30px
      padding 0 20px
      margin-top 30px
      .btns
        width 150px
        .el-button
          display inline-block
          width 65px
          height 30px
  /*筛选条件 end*/
</style>
